#统计表
<template>
  <div id="census">
    <div class="box">
      <el-table :data="censusList" :max-height="tableHeight" class="censusList" style="width: 100%">
        <el-table-column fixed prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="fastestHR" label="最快心率"></el-table-column>
        <el-table-column prop="slowestHR" label="最慢心率"></el-table-column>
        <el-table-column prop="aveHR" label="平均心率"></el-table-column>
        <el-table-column prop="RonTSum" label="室早总数"></el-table-column>
        <el-table-column prop="singleVentricularPremature" label="单发室早"></el-table-column>
        <el-table-column prop="prematurePairing" label="室早成对"></el-table-column>
        <el-table-column prop="ventricularTachycardia" label="室速"></el-table-column>
        <el-table-column prop="prematureVentricularCoupletRate" label="室早二联率" width="100"></el-table-column>
        <el-table-column prop="prematureVentricularTripletRate" label="室早三联率" width="100"></el-table-column>
        <el-table-column prop="preventricularTetralogyRate" label="室早四联率" width="100"></el-table-column>
        <el-table-column prop="SVESSum" label="室上早总数" width="100"></el-table-column>
        <el-table-column prop="singleSupraventricularPrematureBeat" label="单发室上早" width="100"></el-table-column>
        <el-table-column prop="supraventricularPrematureBeatsInPairs" label="室上早成对" width="100"></el-table-column>
        <el-table-column prop="svt" label="室上速"></el-table-column>
        <el-table-column prop="supraventricularPrematureBinaryRhythm" label="室上早二联律" width="120"></el-table-column>
        <el-table-column prop="supraventricularPrematureTriad" label="室上早三联律" width="120"></el-table-column>
        <el-table-column prop="supraventricularEarlyTetralogy" label="室上早四联律" width="120"></el-table-column>
        <el-table-column prop="asystole" label="停搏"></el-table-column>
        <el-table-column prop="longInterval" label="长间期"></el-table-column>
        <el-table-column prop="ront" label="ront"></el-table-column>
      </el-table>
    </div>
    <div class="btnGroup">
      <div>
        <el-select v-model="censusValue" placeholder="请选择">
          <el-option
            v-for="item in censusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-button size="small">删除</el-button>
      </div>
      <div class="b-right">
        <el-button size="small">另存为</el-button>
        <el-button v-if="showStandardEcg" size="small" @click="hideStandardEcg">全屏显示</el-button>
        <el-button v-else size="small" @click="toShowStandardEcg">取消全屏</el-button>
      </div>
    </div>
    <div v-if="showStandardEcg" class="top">
      <ecg-chart 
        ref = "ecgChart"
        :width-value="ecgWidthValue" 
        :height-value="ecgHeightValue"
      ></ecg-chart>
    </div>
    <div v-if="showStandardEcg" class="btnGroup">
      <div class="b-left">
        <div>
          <img src="./../../../assets/resource/ecg/step-backward.png" alt title="最前" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/step-forward.png" alt title="最后" class="littleBtn" />
        </div>
        <el-button size="small">转到</el-button>
        <el-button size="small">基线上移</el-button>
        <el-button size="small">基线下移</el-button>
      </div>
      <div class="b-right">
        <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
      </div>
    </div>
    <div v-if="!showStandardEcg">
      <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
    </div>
  </div>
</template>

<script>
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      censusList: [],
      censusOptions: [
        {
          label: '单元格',
          value: 0
        },
        {
          label: '整行',
          value: 1
        },
        {
          label: '整列',
          value: 2
        }
      ],
      censusValue: '单元格',
      tableHeight: 500,
      showStandardEcg: true,
      options: [
        {
          label: 'I',
          value: 0
        },
        {
          label: 'II',
          value: 1
        },
        {
          label: 'III',
          value: 2
        },
        {
          label: 'aVR',
          value: 3
        },
        {
          label: 'aVL',
          value: 4
        },
        {
          label: 'aVF',
          value: 5
        },
        {
          label: 'V1',
          value: 6
        },
        {
          label: 'V2',
          value: 7
        },
        {
          label: 'V3',
          value: 8
        },
        {
          label: 'V4',
          value: 9
        },
        {
          label: 'V5',
          value: 10
        },
        {
          label: 'V6',
          value: 11
        }
      ]
    }
  },
  created() {
    for (let i = 0; i < 18; i++) {
      this.censusList.push({
        time: '10:48(1)-11:00(1)',
        fastestHR: 0,
        slowestHR: 11,
        aveHR: 11,
        RonTSum: 11, // 室早总数
        singleVentricularPremature: 11, // 单发室早
        prematurePairing: 11, // 室早成对
        ventricularTachycardia: 11, // 室速
        prematureVentricularCoupletRate: 11, // 室早二联率
        prematureVentricularTripletRate: 11, // 室早三联率
        preventricularTetralogyRate: 11, // 室早四联率
        SVESSum: 11, // 室上早总数
        singleSupraventricularPrematureBeat: 11, // 单发室上早
        supraventricularPrematureBeatsInPairs: 11, // 室上早成对
        svt: 11, // 室上速
        supraventricularPrematureBinaryRhythm: 11, // 室上早二联律
        supraventricularPrematureTriad: 11, // 室上早三联律
        supraventricularEarlyTetralogy: 11, // 室上早四联律
        asystole: 11, // 停搏
        longInterval: 11, // 长间期
        ront: 11
      })
    }
    this.$nextTick(() => {
      this.ecgWidthValue = window.innerWidth - 10
    })
  },
  methods: {
    toShowStandardEcg() {
      this.showStandardEcg = true
      this.tableHeight = 500
      this.$nextTick(() => {
        this.$refs.ecgChart.chartBox()
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      this.tableHeight = window.innerHeight - 120
    }
  }
}
</script>

<style lang="scss" scoped>
#census {
  width: 100%;
  .box {
    display: flex;
    width: 100%;
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #979797;
    .b-left {
      display: flex;
      align-items: end;
    }
    .el-select {
      width: 120px;
      margin-right: 20px;
    }
    .name {
      margin-right: 10px;
    }
  }
  .top {
    .container {
      border: 1px solid #979797;
    }
  }
  .fullBtn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
  }
  .littleBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #979797;
    margin-right: 10px;
  }
  .el-dialog {
    .leadList {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 53px;
        margin-top: 10px;
      }
    }
    .list {
      margin-top: 10px;
      .name {
        font-size: 14px;
        color: #4a4a4a;
        text-align: left;
        width: 100px;
        display: inline-block;
      }
      .el-select {
        width: 115px;
      }
    }
  }
}
</style>



